<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>后台登录</title>
<link rel="icon" href="../plugin/admin/favicon.ico" type="image/ico">
<meta name="keywords" content="登录模板">
<meta name="description" content="登录模板">
<meta name="author" content="yinqi">
<link href="../plugin/admin/css/bootstrap.min.css" rel="stylesheet">
<link href="../plugin/admin/css/materialdesignicons.min.css"
	rel="stylesheet">
<link href="../plugin/admin/css/style.min.css" rel="stylesheet">
<style>
body {
	background-color: #fff;
}

.lyear-login-box {
	position: relative;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.lyear-login-left {
	width: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	position: fixed;
	height: 100%;
	z-index: 555;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.lyear-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.5);
}

.lyear-logo {
	margin-bottom: 50px;
}

.lyear-featured {
	z-index: 12;
	position: absolute;
	bottom: 0;
	padding: 30px;
	width: 100%;
}

.lyear-featured h4 {
	color: #fff;
	line-height: 32px;
}

.lyear-featured h4 small {
	color: #fff;
	display: block;
	text-align: right;
	margin-top: 15px;
}

.lyear-login-right {
	margin-left: 50%;
	position: relative;
	z-index: 999;
	padding: 100px;
	background-color: #fff;
}

@media screen and (max-width: 1024px) {
	.lyear-login-right {
		padding: 50px;
	}
}

@media screen and (max-width: 820px) {
	.lyear-login-left {
		width: 100%;
		position: relative;
		z-index: 999;
		height: 300px;
	}
	.lyear-login-right {
		margin-left: 0;
	}
}

@media screen and (max-width: 480px) {
	.lyear-login-right {
		padding: 50px;
	}
}

@media screen and (max-width: 320px) {
	.lyear-login-right {
		padding: 30px;
	}
}
</style>
</head>

<body>
	<div class="lyear-login-box">
		<div class="lyear-login-left"
			style="background-image: url(../img/show.jpg)">
			<div class="lyear-overlay"></div>
			<div class="lyear-featured">
				<h4>
					真正的程序员，就算月挣3000，房租（贷）2000，但该请客的时候也决不含糊。<small> - 小王《程序员专属》</small>
				</h4>
			</div>
		</div>
		<div class="lyear-login-right">

			<div class="lyear-logo text-center">
				<a href="#!"><img src="../img/logo-sidebar.png" alt="logo" /></a>
			</div>
			<form action="#!" method="post">
				<div class="form-group">
					<label for="username">用户名</label> <input type="text"
						class="form-control" id="username" name="username" required="1"
						placeholder="请输入您的用户名">
				</div>

				<div class="form-group">
					<label for="password">密码</label> <input type="password"
						class="form-control" id="password" name="password" required="1"
						placeholder="请输入您的密码">
				</div>

				<div class="form-group">
					<label for="captcha">验证码</label>
					<div class="row">
						<div class="col-xs-7">
							<input type="text" name="captcha" id="captcha"
								class="form-control" required="1" placeholder="验证码">
						</div>
						<div class="col-xs-5">
							<img src="../captcha/get" width="130px" height="38px"
								id="img_captcha" />
						</div>
					</div>
				</div>
				<div class="form-group">
					<button class="btn btn-block btn-primary" type="button" id="login">立即登录</button>
				</div>
				<footer class="text-center">
					<p class="m-b-0">
						xiaowei © 2020 <a href="https://love-java.baklib.com/">IT程序员</a>.
						Welcome to our hotel
					</p>
				</footer>
			</form>

		</div>
	</div>
	<script type="text/javascript" src="../plugin/admin/js/jquery.min.js"></script>
	<script type="text/javascript"
		src="../plugin/admin/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#img_captcha").click(function() {
				this.src = "../captcha/get?date=" + new Date().valueOf()
			});
			$("#login").click(function() {
				//alert("666")
				$.ajax({
					url : '../admin/doLogin',
					dataType : "json",
					type : 'POST',
					cache : false,
					//async: true,//请求是否异步，默认为异步，这也是ajax重要特性
					data : {
						username : $("#username").val(),
						password : $("#password").val(),
						keycode : $("#captcha").val()
					}, //参数值
					success : function(data) {
						console.log(data.result);
						if (data.result == -1) {
							alert("验证码错误")
						}
						if (data.result == 0) {
							alert("用户名不存在！")
						}
						if (data.result == 1) {
							alert("用户名密码和验证码都正确！")
							window.location.href = "../admin/index";
						}
						if (data.result == 2) {
							alert("存在两个相同的用户！")
						}
						if (data.result == 3) {
							alert("密码输入错误！")
						}
						if (data.result == "success") {
							alert("登录成功！")
						}
						console.log(data.result);
						//根据返回的数据进行处理
					},
					complete : function() {
						alert("处理完毕")
					},
					error : function() {
						alert("服务器暂时不可用")
					}
				});

			})
		})
	</script>
</body>
</html>